<template>
  <div>
    <navblack>详细信息</navblack>
    <form
      action
      enctype="multipart/form-data"
      @submit.prevent="submitForm($event)"
    >
      <div class="main">
        <div>
          <span>主题</span>
          <input
            type="text"
            name="theme"
            :value="bgData.theme"
            disabled="disabled"
          />
        </div>
        <div>
          <span>开始时间</span>
          <input
            type="text"
            name="start-time"
            :value="bgData.addtime"
            disabled="disabled"
          />
        </div>
        <div>
          <span>结束时间</span>
          <input
            type="text"
            name="end-time"
            :value="bgData.exittime"
            disabled="disabled"
          />
        </div>
        <div>
          <span>电话</span>
          <input
            type="tel"
            name="tel"
            :value="bgData.phone"
            maxlength="11"
            disabled="disabled"
          />
        </div>
        <div>
          <span>本人性别</span>
          <div class="select-sex">
            <input
              type="radio"
              disabled="disabled"
              v-model="bgData.sex"
              value="男"
              name="user-sex"
              id="user-male"
            />
            <label for="user-male"></label>男
            <input
              type="radio"
              disabled="disabled"
              v-model="bgData.sex"
              value="女"
              name="user-sex"
              id="user-female"
            />
            <label for="user-female"></label>女
          </div>
        </div>
        <div>
          <span>地址</span>
          <input
            type="text"
            :value="bgData.detailed_address"
            name="address"
            disabled="disabled"
          />
        </div>
        <div>
          <span>保证金</span>
          <div class="ensure-rule">
            <span>{{ task_money }}元</span>
            <span>收取20%手续费</span>
          </div>
        </div>
        <div>
          <span>所需邀请次数</span>
          <input
            type="text"
            :value="bgData.number"
            name="address"
            disabled="disabled"
          />
        </div>
        <div id="upfile">
          <span>上传照片</span>
          <input
            type="file"
            id="upimage"
            disabled="disabled"
            name="imageSrc"
            accept="image/png, image/jpeg, image/gif, image/jpg"
          />
          <!-- <label class="up-image" for="upimage">{{ 0 ? "" : "+" }}</label> -->
          <label class="up-image" for="upimage">
            {{ bgData.img_id == '' ? '+' : '' }}
            <img
              v-if="bgData.img_id"
              :src="bgData.img_id"
              id="img-upload"
              alt
            />
          </label>
        </div>
        <div id="remarks">
          <span>备注需求</span>
          <textarea
            name="remarks"
            disabled="disabled"
            id
            cols="100%"
            rows
            :value="bgData.content"
          ></textarea>
        </div>
        <div class="confirm">
          <button
            v-if="type === '我的任务' || status !== 0"
            type="submit"
            disabled="disabled"
            class="btn-release"
          >
            <a style="color:#fff" :href="`tel:${bgData.phone}`"
              >联系方式：{{ bgData.phone }}</a
            >
          </button>
          <div class="judeg" v-if="type === '我的请求' && status === 0">
            <button @click="isJudeg(2)">拒绝</button>
            <button @click="isJudeg(1)">同意</button>
          </div>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
// import navBlack from '@/components/nav-black'
const navBlack = () => import('@/components/nav-black')

export default {
  data() {
    return {
      theme_title: '陪我去逛街啊',
      start_date: '2019-08-15T12:30',
      end_date: '2019-08-15T12:30',
      tel_num: '15552839720',
      sex: true,
      address: '杭州城西银泰',
      invite_num: '2次',
      bgData: [],
      task_money: null,
      type: null,
      status: null
    }
  },
  created: function() {},
  methods: {
    submitForm(e) {
      console.log(e)
    },
    judgeState() {
      this.type = this.$route.query.type
      this.status = this.$route.query.status
    },
    isJudeg(index) {
      this.status = null
      this.$axios({
        method: 'post',
        url: 'Needloginaction/confirm',
        data: {
          token: sessionStorage.token,
          id: this.$route.query.id,
          status: index
        }
      })
        .then(res => {
          if (res.data.code == 200) {
            alert(res.data.msg)
          } else {
            alert(res.data.msg)
          }
        })
        .catch(error => {
          alert('网络错误，请刷新后重试~')
        })
    }
  },
  created() {
    this.task_money = sessionStorage.task_money
    this.$axios({
      method: 'post',
      url: 'Needloginaction/myRequestDetails',
      data: {
        token: sessionStorage.token,
        id: this.$route.query.id
      }
    })
      .then(res => {
        if (res.data.code == 200) {
          this.bgData = res.data.data
          this.judgeState()
        } else {
          alert(res.data.msg)
        }
      })
      .catch(error => {
        alert('网络错误，请刷新后重试~')
      })
  },
  components: {
    navblack: navBlack
  }
}
</script>

<style scoped>
.judeg {
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.judeg button {
  width: 40%;
  height: 0.8rem;
  margin: 0 auto;
  font-size: 0.44rem;
  color: #fff;
  border-radius: 0.4rem;
  background-color: #323232;
  border: #323232;
}
.main {
  width: 100%;
  margin-top: 0.933rem;
}
.main > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  height: 0.8rem;
  padding: 0.35rem 0.3rem;
  margin: 0 auto;
  font-size: 0.4rem;
  border-bottom: 1px solid #dedede;
}
.main > div > span {
  color: #303030;
}
.main > div input {
  text-align: right;
  color: #888;
  border: none;
  background: none;
}
.select-sex {
  color: #888;
}
input[type='radio'] {
  width: 0;
  opacity: 0;
}
input[type='radio'] + label::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 0.466rem;
  height: 0.466rem;
  margin: 0.35em;
  border-radius: 0.1rem;
  border: 2px solid #a1a1a1;
}
input[type='radio']:checked + label::before {
  content: '✔';
  text-align: center;
  line-height: 0.45rem;
  color: #000;
  border: 2px solid #000;
  background-clip: content-box;
}
.ensure-rule {
  display: flex;
  flex-direction: column;
  text-align: right;
  color: #000;
}
#upfile {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: normal;
  height: 4rem;
}
input[type='file'] {
  width: 0;
  opacity: 0;
}
.up-image {
  width: 2.24rem;
  height: 2.24rem;
  text-align: center;
  line-height: 2.24rem;
  font-size: 2rem;
  color: #fff;
  border-radius: 0.133rem;
  background-color: #e0e0e0;
  overflow: hidden;
}
.up-image > img {
  width: 100%;
  height: 100%;
}
#remarks {
  display: flex;
  flex-direction: column;
  align-items: normal;
  justify-content: flex-start;
  height: 4rem;
}
#remarks > textarea {
  height: 100%;
  margin: 0.4rem 0;
  padding: 0.3rem;
  box-sizing: border-box;
  border-radius: 0.133333rem;
  background-color: #e0e0e0;
  resize: none;
}
.confirm {
  width: 100% !important;
  padding: 0.333rem 0 !important;
  box-shadow: 0 -1px 5px #e0e0e0;
}
.btn-release {
  width: 80%;
  height: 0.8rem;
  margin: 0 auto;
  font-size: 0.44rem;
  color: #fff;
  border-radius: 0.4rem;
  background-color: #323232;
  border: #323232;
}
</style>
